<template>
	<div class="menu-box">
		<ul>
			<li
				class="menu-item"
				v-for="item in files"
				:key="item.id"
				:data-id="item.id"
				:data-title="item.title">
				<!--元素身上绑定数据，便于右键菜单获取-->
				<i class="el-icon-document"></i>
				<span
					v-if="editItem !== item.id && !item.isNew"
					class="title"
					@click="openFileContent(item.id)">
					{{ item.title }}
				</span>
				<el-input
					v-else
					class="titleInp"
					v-model="editText"
					size="mini"
					@keyup.enter.native="saveFile(item)"
					@keyup.27.native="close()"
					placeholder="文件名"></el-input>
				<!--添加右键菜单后，按钮就可以删除了-->
				<!-- <span class="operate" v-show="editItem !== item.id && !item.isNew">
					<i class="el-icon-edit" @click="setEditItem(item.id)"></i>
				</span>
				<span class="operate" @click="doDelete(item.id)">
					<i class="el-icon-delete"></i>
				</span> -->
			</li>
		</ul>
	</div>
</template>
<script>
import useContextMenu from "@/renderer/hooks/useContextMenu"
import { getParentNode } from "../utils/helper"
export default {
	name: "FileList",
	props: {
		files: Array,
		editFile: Function,
		deleteFile: Function,
		reName: Function,
	},
	data() {
		return {
			editItem: 0,
			editText: "",
		}
	},
	mounted() {
		this.createMenu()
	},
	methods: {
		saveFile(item) {
			if (this.editText.trim() !== "") {
				//获取是否新建
				const file = this.files.find(f => f.id == item.id)
				this.reName(item.id, this.editText, file.isNew)
				this.editText = ""
				this.editItem = 0
			} else {
				this.$message.error("标题不能为空！")
			}
		},
		setEditItem(id) {
			if (this.editItem !== 0) {
				//如果此时正有新增框，要去除
				const file = this.files.find(f => f.id === this.editItem)
				if (file.isNew) this.deleteFile(this.editItem)
			}
			this.editItem = id
		},
		close() {
			const currentFile = this.files.find(file => file.id == this.editItem)
			if (currentFile && currentFile.isNew) {
				this.deleteFile(currentFile.id)
			}
			this.editText = ""
			this.editItem = 0
		},
		openFileContent(id) {
			this.editFile(id)
			//打开文件内容时关闭其他的重命名
			this.close()
		},
		doDelete(id) {
			this.deleteFile(id)
		},
		//右键菜单
		createMenu() {
			var currentEle = {}
			//在内层函数中不能够使用this
			const that = this
			//定制一个菜单选项
			const contextMenuTemp = [
				{
					label: "重命名",
					click() {
						let node = getParentNode(currentEle.current, "menu-item")
						if (node) {
							that.setEditItem(node.dataset.id)
						} else {
							that.$message.warning("未选择指定文件！")
						}
					},
				},
				{
					label: "删除",
					click() {
						let node = getParentNode(currentEle.current, "menu-item")
						if (node) {
							that.deleteFile(node.dataset.id)
							that.$message.success("操作成功！")
						} else {
							that.$message.warning("未选择指定文件！")
						}
					},
				},
			]

			useContextMenu(contextMenuTemp, ".menu-box", currentEle)
		},
	},
}
</script>
<style scoped>
ul {
	padding: 0;
}

li {
	align-items: center;
	display: flex;
	color: white;
	height: 40px;
	width: 90%;
	border-bottom: 1px solid gray;
	padding-left: 15px;
}
.title {
	width: 160px;
	margin-left: 15px;
	margin-right: 10px;
}
.titleInp {
	margin-left: 15px;
	width: 150px;
}
.operate {
	margin-left: 15px;
}
</style>
